<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">

		<title>Compass UXR follow-up</title>

		<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
		<meta name="author" content="Hakim El Hattab">

		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<link rel="stylesheet" href="css/reveal.css">
		<link rel="stylesheet" href="css/theme/default.css" id="theme">
		<link href='http://fonts.googleapis.com/css?family=Roboto:400,500,700,300' rel='stylesheet' type='text/css'>

		<!-- For syntax highlighting -->
		<link rel="stylesheet" href="lib/css/zenburn.css">

		<!-- If the query includes 'print-pdf', include the PDF print sheet -->
		<script>
			if( window.location.search.match( /print-pdf/gi ) ) {
				var link = document.createElement( 'link' );
				link.rel = 'stylesheet';
				link.type = 'text/css';
				link.href = 'css/print/pdf.css';
				document.getElementsByTagName( 'head' )[0].appendChild( link );
			}
		</script>

		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
	</head>

	<body>

		<div class="reveal">

			<!-- Any section element inside of this container is displayed as a slide -->
			<div class="slides">
				<section>
					<h2>Compass UXR Follow-up</h2>
					<p class="fragment">Issues from previous UXR:</p>
					<ol>
							<li class="fragment">MO Picker exceptions</li>
							<li class="fragment">Showing/hiding settings</li>
							<li class="fragment">URL-based targeting suggestions</li>
					</ol>

				</section>

				<!-- Example of nested vertical slides -->
				<section>
					<section>
						<h2>1. MO Picker exceptions</h2>
						<p>
							Context: Special cases where user can't select multiple User Actions from the same marketing objective
						</p>
					</section>
					<section>
						<h2>Previous proposal</h2>
						<p>
							Previously, we disabled the option and showed a tooltip:
						</p>
					
							<img src="img/mo-previous.png">
						<p class="fragment roll-in" style="color:#db4437">Non-standard</p>
						<p class="fragment roll-in" style="color:#db4437">Forced to uncheck </p>
					</section>
					<section>
						<p>To address these issues, we tried several alternatives:</p>
						<a href="https://aw-ux.googleplex.com/campaignmgmt/all_campaigns/construction/compass-uxr4/" target="_blank"><img src="img/option1.png" class="fragment"></a>

						<a href="https://aw-ux.googleplex.com/campaignmgmt/all_campaigns/construction/compass-uxr5/" target="_blank"><img src="img/option2.png" class="fragment" style="position:relative; margin-top:-410px; margin-left:30px; z-index:2;"></a>

						<p class="fragment roll-in" style="color:#db4437">Confusing mix of radio and checkboxes</p>
						<p class="fragment roll-in" style="color:#db4437">No way to 'deselect' a radio</p>
					</section>
					<section>
						<h2>New proposal</h2>
						<p>We believe this is the best solution:</p>
						<a href="https://aw-ux.googleplex.com/campaignmgmt/all_campaigns/construction/compass-uxr6/" target="_blank"><img src="img/option3.png" ></a>
					</section>
					
				</section>
				<section>
				<section>
					<h2>2. Showing/hiding settings</h2>
						<p>
							Context: We want to selectively show/hide advanced features based on selected marketing objectives.
						</p>
				</section>

				<section>
					<h2>Previous proposal</h2>
					<p>
							Previously, we put additional settings inside a dropdown, bringing out those that were revelant to selected MO.
						</p>
					<img style="border:none; -webkit-box-shadow:none; background:transparent" src="img/dropdown.png">

					<p class="fragment roll-in" style="color:#db4437">Incompatible with Chameleon</p>
					
				</section>
				<section>
					<h2>New proposal</h2>
					<p>
							We'll have 4 chameleon 'skins' for the 4 Marketing Objectives:
						</p>

					<a href="https://aw-ux.googleplex.com/campaignmgmt/all_campaigns/construction/compass-uxr6/" target="_blank">
					<img style="border:none; -webkit-box-shadow:none; background:transparent" src="img/skins.png"></a>

					<p class="fragment" style="color:#00b977">Chameleon-friendly </p>
					<p class="fragment" style="color:#00b977">Advanced options moved to zippy </p>
				
					
				</section>
				<section>
					<h2>What about current sub-types?</h2>
					<p>
						We will keep all existing subtype skins, and map them to specific User Action choices.
					</p>
				</section>
				</section>

				
				<section>
				<section>
					<h2>3. URL-based targeting suggestions</h2>
						<p>
							Context: We want to show criteria-level targeting suggestions based on a provided landing page. 
						</p>
				</section>

				<section>
					<h2>Previosly...</h2>
					<p> We asked for URL in step 1 </p>
					<img src="img/previous-landing.png">
				</section>

				<section>
					<h2>New proposal</h2>
						<p>
							Move URL field to ad-group step. 
							<a href="https://aw-ux.googleplex.com/campaignmgmt/all_campaigns/construction/compass-basic2/" target="_bank">DEMO</a>
						</p>
				</section>
			</section>



			</div>

		</div>

		<script src="lib/js/head.min.js"></script>
		<script src="js/reveal.min.js"></script>

		<script>

			// Full list of configuration options available here:
			// https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
				controls: true,
				progress: true,
				history: true,
				center: true,
				width: 1400,
				theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
				transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none

				// Parallax scrolling
				// parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg',
				// parallaxBackgroundSize: '2100px 900px',

				// Optional libraries used to extend on reveal.js
				dependencies: [
					{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
					{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
					{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
					{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
				]
			});

		</script>

	</body>
</html>
